<template>
  <div class="example-less">
    lorem5
  </div>
</template>

<script>
export default {

};
</script>

<style lang="less" scoped>
@width: 1000px;
@height: 400px;
@primary: #0783ca;
@success: #048042;
@imgBg: '@/assets/login-bg.jpg';

.bg-primary {
  background-color: @primary;
}

.bg-success {
  background-color: @success;
}

.text-primary {
  color: @primary;
}

// 选择器名称后又(),表示这个选择器只能被混入，不会被编译为单独的选择器。
.border(@w, @c, @s: solid) {
  border: @w @s @c;
}

.example-less {
  width: @width + 100px;
  height: @height;
  // background-color: @success;
  // background-image: url(@imgBg); // 变量用于css函数： url（）， calc()

  // mixins
  .bg-success();
  .text-primary();
  .border(10px, red, dashed)
}

.box {

  // &，代表。box自己
  &>li {
    //">" 子元素关系
    height: 100px;
  }

  & p {
    // " "，空格表示后代关系
    width: 100px;
  }

  >div {
    // & ， 表示div所在位置的父亲。可以省略。
    color: @primary
  }

  >a {
    // color: #048042; // 这一级的选择器没有CSS属性，就不编译为独立选择器。

    :link {
      color: orange;
    }

    :visited {
      color: #048042;
      text-decoration: none;
    }

    :hover {
      color: #048042;
      text-decoration: none;
    }

    :active {
      color: #048042;
      text-decoration: none;
    }
  }
}
</style>